<template>
  <div>
    <ButtonCounter v-model:count="count" />
    <br />
    <ComponentB />
    <ComponentC />
    <a-button type="primary">Primary</a-button>
    <a-table :columns="columns" :data="tableData" />
  </div>
</template>

<script setup>
import ButtonCounter from "@/components/ButtonCounter.vue";

import ComponentB from "@/components/ComponentB.vue";
import ComponentC from "@/components/ComponentC.vue";

import { reactive, ref } from "vue";

const count = ref(200);

const columns = [
  { title: "Date", dataIndex: "date" },
  { title: "Name", dataIndex: "name" },
  { title: "Address", dataIndex: "address" },
];

const tableData = reactive([
  { date: "2022-01-01", name: "张三", address: "阿富汗" },
  { date: "2022-02-02", name: "张", address: "阿富汗" },
]);
</script>

<style lang="scss" scoped></style>
